<template>
  <div class="report-container">
    <h1 style="text-align: center;color: #FFFFFF">线圈车间绩效看板</h1>
    <div>
      <!--     第二排 -->
      <el-row :gutter="20">
        <el-col :span="16">
          <div>
            <div class="report-main">
              <div class="con-left">
                <div class="main-table">
                  <div class="table-header">
                    <div class="table-item item-1">
                      <div class="item-col col-1">工序</div>
                      <div class="item-col col-2">物料名称</div>
                      <div class="item-col col-3">工单号</div>
                      <div class="item-col col-4">加工时长(h)</div>
                      <div class="item-col col-5">加工数量</div>
                      <div class="item-col col-6">产能</div>
                    </div>
                  </div>
                  <div ref="tableContent" class="table-content">
                    <template v-for="(item, index) in lowData">
                      <div :key="index" class="table-item item-1">
                        <div class="item-col col-1">{{ item.operationName }}</div>
                        <div class="item-col col-2">{{ item.itemName }}</div>
                        <div class="item-col col-3">{{ item.shopOrder }}</div>
                        <div class="item-col col-4">{{ parseInt(item.time) }}</div>
                        <div class="item-col col-5">{{ item.doneQty }}</div>
                        <div class="item-col col-6">{{ parseInt(item.efficiency) }}</div>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <div class="main-table">
              <div class="table-header">
                <el-row class="item-line">
                  <el-col :span="12"><span class="title">日产量:</span><span class="titleTwo">{{ xnForm['日产量'] }}</span>
                  </el-col>
                  <el-col :span="12"><span class="title">效能:</span><span class="titleTwo">{{ xnForm['日效能'] }}</span>
                  </el-col>
                </el-row>
                <el-row class="item-line">
                  <el-col :span="12"><span class="title">月产量:</span><span class="titleTwo">{{ xnForm['月产量'] }}</span>
                  </el-col>
                  <el-col :span="12"><span class="title">效能:</span><span class="titleTwo">{{ xnForm['月效能'] }}</span>
                  </el-col>
                </el-row>
              </div>

              <el-row>
                <el-col :span="12">
                  <div>
                    <div class="il-childTitle"><span>月不良数: </span><span class="il-childs">{{ xnForm['月不良数'] }}</span>
                    </div>
                    <div class="il-childTitle"><span>月报废数: </span><span class="il-childs">{{ xnForm['月报废数'] }}</span>
                    </div>
                    <div class="il-childTitle" style="display: none"><span>月超领数: </span><span
                        class="il-childs">{{ xnForm['月超领数'] }}</span></div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div>
                    <div class="il-childTitle"><span>异常次数: </span><span class="il-childs">{{ xnForm['异常次数'] }}</span>
                    </div>
                    <div class="il-childTitle"><span>异常时长: </span><span class="il-childs">{{ xnForm['异常总时长'] }}</span>
                    </div>
                    <div class="il-childTitle" style="display: none"><span>违规次数: </span><span
                        class="il-childs">{{ xnForm['违规次数'] }}</span></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--   第三排 -->
    <div class="echarts">
      <el-row>
        <el-col :span="8">
          <div class="echarts1">
            <SimEcharts class="e-chart-border" :chart-data="annulPieData1"/>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="echarts2">
            <SimEcharts class="e-chart-border" :chart-data="lineData"/>
          </div>
        </el-col>

        <el-col :span="8">
          <div>
            <SimEcharts class="e-chart-border" :chart-data="annulPieData2"/>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {connectWebsocket, sendMessage} from "@/api/websocket";

export default {
  name: 'ColiPerformance',
  data() {
    return {
      nowDate: '', // 当前日期
      lowData: [],
      tableHeight: null,
      scrollHeight: null,
      lastScrollTop: 0,
      xnForm: {
        '月不良数': 0,
        '月报废数': 0,
        '异常总时长': 0,
        '异常次数': 0,
        '违规次数': 0,
        '月超领数': 0,
        '日产量': 0,
        '日效能': 0,
        '月产量': 0,
        '月效能': 0
      },
      checked: 1,
      annulPieData1: {
        title: {
          text: '月高效能TOP5'
        },
        color: ['#FF9966', '#FFFFCC', '#0099CC', '#99CC33', '#99CCCC'],
        series: [{
          type: 'pie',
          clockwise: false,
          startAngle: 90,
          roseType: 'area',
          radius: window.screen.height > 961 ? ['30', '80'] : ['30', '50'],
          // radius: ['30','50'],
          center: window.screen.height > 961 ? ['30%', '60%'] : ['45%', '40%'],
          hoverAnimation: false,
          data: [{
            value: '',
            name: ''
          },
            {
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            }],
          itemStyle: {
            normal: {
              borderColor: '#273454',
              borderWidth: '5'
            }
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{b}：\n\n {c}',
            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 100,
                width: 0,
                height: 10,
                padding: [3, 3, 0, -16],
                shadowColor: '#1c1b3a',
                shadowBlur: 1,
                shadowOffsetX: '0',
                shadowOffsetY: '2'
              },
              a: {
                padding: [-35, 15, -20, 5]
              }
            }
          },
          labelLine: {
            normal: {
              length: 5,
              length2: 10,
              lineStyle: {
                width: 1
              }
            }
          }
        }]
      },
      lineData: {
        title: {
          text: '班组平均效能趋势',
          x: 'top',
          y: '4px',
          textStyle: {
            color: '#747373'
          }
        },
        grid: { // 网格
          left: '6%',
          right: '6%',
          bottom: window.screen.height > 961 ? '10%' : '40%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLabel: {
            fontSize: 12,
            margin: 5,
            color: '#85d7f9'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 12,
            color: '#3dcaff'
          }
        },
        series: [
          {
            type: 'line',
            stack: '总量',
            data: [],
            itemStyle: {
              normal: {
                // 自定义每个折线点颜色
                color: function (params) {
                  const colorList = ['#b2d235', '#f47920', '#f58f98', '#f58f98', '#6f599c', '#ffe600', '#65c294']
                  return colorList[params.dataIndex]
                },
                lineStyle: {
                  color: '#f58f98'
                }
              }
            },
            label: {
              show: true,
              textStyle: {
                color: '#00F5FF',
                fontSize: 10
              }
            }
          },
          {
            type: 'line',
            stack: '总量',
            data: [],
            itemStyle: {
              normal: {
                // 自定义每个折线点颜色
                color: function (params) {
                  const colorList = ['#b2d235', '#f47920', '#f58f98', '#f58f98', '#6f599c', '#ffe600', '#65c294']
                  return colorList[params.dataIndex]
                },
                lineStyle: {
                  color: '#f2eada'
                }
              }
            },
            label: {
              show: true,
              textStyle: {
                color: '#FF00FF',
                fontSize: 10
              }
            }
          },
          {
            type: 'line',
            stack: '总量',
            data: [],
            itemStyle: {
              normal: {
                // 自定义每个折线点颜色
                color: function (params) {
                  const colorList = ['#b2d235', '#f47920', '#f58f98', '#f58f98', '#6f599c', '#ffe600', '#65c294']
                  return colorList[params.dataIndex]
                },
                lineStyle: {
                  color: '#3D7878'
                }
              }
            },
            label: {
              show: true,
              textStyle: {
                color: '#7D7DFF',
                fontSize: 10
              }
            }
          }
        ]
      },
      barDoubleData: {
        title: {
          text: '月超领消耗TOP5',
          x: 'top',
          y: '4px',
          textStyle: {
            color: '#5da8e7'
          }
        },
        grid: {
          top: '15%',
          bottom: '12%',
          left: '15%',
          right: '10%'
        },
        xAxis: {
          max: 'dataMax',
          axisLabel: {
            fontSize: 12,
            margin: 5,
            color: '#85d7f9'
          }
        },
        yAxis: {
          type: 'category',
          data: ['TOP1', 'TOP2', 'TOP3', 'TOP4', 'TOP5'],
          inverse: true,
          axisLabel: {
            fontSize: 12,
            color: '#3dcaff'
          },
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 4 // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: 'X',
            type: 'bar',
            data: [120, 200, 150, 80, 70],
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: '#fab27b',
                fontSize: 15
              }
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  const colorList = ['#50b7c1', '#009ad6', '#cde6c7', '#6f60aa', '#d5c59f']
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ],
        legend: {
          show: false
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      },
      annulPieData2: {
        title: {
          text: '月报废TOP5'
        },
        color: ['#FF9966', '#FFFFCC', '#0099CC', '#99CC33', '#99CCCC'],
        series: [{
          type: 'pie',
          clockwise: false,
          X: 2,
          startAngle: 90,
          radius: window.screen.height > 961 ? ['30', '80'] : ['30', '50'],
          // radius: ['30','50'],
          center: window.screen.height > 961 ? ['30%', '60%'] : ['45%', '40%'],
          hoverAnimation: false,
          roseType: 'radius',
          data: [{
            value: '',
            name: ''
          },
            {
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            },
            {
              value: '',
              name: ''
            }
          ],
          itemStyle: {
            normal: {
              borderColor: '#273454',
              borderWidth: '5'
            }
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{b}：\n{c}',
            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 100,
                width: 0,
                height: 10,
                padding: [3, 3, 0, -16],
                shadowColor: '#1c1b3a',
                shadowBlur: 1,
                shadowOffsetX: '0',
                shadowOffsetY: '2'
              },
              a: {
                padding: [-35, 15, -20, 5]
              }
            }
          },
          labelLine: {
            normal: {
              length: 2,
              length2: 1,
              lineStyle: {
                width: 1
              }
            }
          }
        }]
      }
    }
  },
  created() {
    this.reloadWeb()
  },
  mounted() {
    this.initWebData()
    this.rollText()
  },
  destroyed() {

  },
  methods: {
    initWebData() {
      connectWebsocket(
          // 测试地址
          process.env.VUE_APP_WS_URL + '/CoilDashBoardWebSocket/coil',
          // 传递给后台的数据
          {},
          // 成功拿到后台返回的数据的回调函数
          (data) => {
            console.log(JSON.parse(data))
            this.queryLowEfficiency(JSON.parse(data).lowEfficiencyBatch17) // 低效能
            this.produceFiled(JSON.parse(data).performanceStatistics17) // 中间头部表格信息
            this.queryHigherEfficiency(JSON.parse(data).tallEfficiencyBatch17) // 高效能
            this.queryMonthBadScrap(JSON.parse(data).monthScrappedTopFive17) // 月报废TOP5
            this.queryTeamsAverageEfficiency(JSON.parse(data).averagePerformanceTrend17) // 班组效能
          },
          () => {
            sendMessage("Im tired!")
          }
      )
    },
    reloadWeb() {
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload, 1000 * 60 * 60 * 8)
    },
    rollText() {
      let speed = 300
      let that = this

      function Marquee() {
        if (that.$refs.tableContent) {
          if (that.$refs.tableContent.scrollTop >= that.$refs['tableContent'].offsetHeight) {
            that.$refs.tableContent.scrollTop = 0
          } else that.$refs.tableContent.scrollTop = that.$refs.tableContent.scrollTop + 1
        }
      }

      setInterval(Marquee, speed)
    },
    formatDate() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() // 日
      const week = date.getDay() // 星期
      const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second} ${weekArr[week]}`
    },
    produceFiled(data) {
      this.xnForm = data
    },
    queryHigherEfficiency(data) {
      let efList = []

      for (const key in data) {
        const obj = {
          name: key,
          value: data[key]
        }
        efList.push(obj)
      }
      efList = efList.sort(function (a, b) {
        return b.value - a.value
      }).splice(0, 5)
      efList.forEach((item, index) => {
        this.annulPieData1.series[0].data[index].value = item.value
        this.annulPieData1.series[0].data[index].name = item.name
      })
    },
    queryLowEfficiency(data) {
      this.lowData = data
    },
    queryTeamsAverageEfficiency(data) {
      const xAxisData = []
      const series = {
        zhLaoZu: []
      }
      const fbData = data
      for (const key in fbData['线圈组']) {
        xAxisData.push(key)
      }
      if (xAxisData.length) {
        xAxisData.forEach(x => {
          if (fbData['线圈组']) series.zhLaoZu.push(fbData['线圈组'][x])

        })
      }
      this.lineData.xAxis.data = xAxisData
      this.lineData.series[0].data = series.zhLaoZu
    },
    queryMonthBadScrap(data) {
      let efList = []
      for (const key in data) {
        const obj = {
          name: key,
          value: data[key]
        }
        efList.push(obj)
      }
      efList = efList.sort(function (a, b) {
        return b.value - a.value
      }).splice(0, 5)
      efList.forEach((item, index) => {
        this.annulPieData2.series[0].data[index].value = item.value.num
        this.annulPieData2.series[0].data[index].name = item.value.OPERATION_NAME
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/* 小分辨率设备 (平板、电视机或者安卓设备, 960px and down) */
@media only screen and (max-width: 960px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    font-size: 12px;

    .report-main {
      margin-left: 1.5rem;
      margin-top: -1.5rem;

      .con-left {
        .main-table {
          height: calc(100% - 32px);
          border: 1px solid rgba(0, 85, 255, 0);
          overflow: hidden;

          .table-header {
            overflow: hidden;

            .table-item {
              border: 1px solid rgba(251, 252, 252, 0);
              display: flex;
              font-weight: bolder;
              min-height: 32px;

              .item-col {
                color: #ffffff;
                border: 1px solid rgba(0, 255, 255, 0);
                word-wrap: break-word;
                padding: 2px 2px;
              }

              .col-1 {
                width: 9rem;
              }

              .col-2 {
                width: 20rem;
              }

              .col-3 {
                width: 15rem;
              }

              .col-4 {
                width: 5rem;
              }

              .col-5 {
                width: 5rem;
              }

              .col-6 {
                width: 5rem;
              }
            }
          }

          .table-content {
            height: 13rem;
            overflow: hidden;

            .table-item:nth-of-type(odd) {
              background: rgba(122, 178, 203, 0.22);
            }

            .table-item:nth-of-type(even) {
              background: rgba(153, 203, 122, 0.22);
            }

            .table-item {
              display: flex;
              font-weight: bolder;
              border: 1px #FFFFFF solid;
              margin-top: 0.3rem;
              border-radius: 5px;

              .item-col {
                color: #ffffff;
                border: 1px solid rgba(0, 255, 255, 0.29);
                word-wrap: break-word;
              }

              .col-1 {
                width: 9rem;
              }

              .col-2 {
                width: 20rem;
              }

              .col-3 {
                width: 15rem;
              }

              .col-4 {
                width: 5rem;
              }

              .col-5 {
                width: 5rem;
              }

              .col-6 {
                width: 5rem;
              }
            }
          }
        }
      }
    }

    .main-table {
      margin-top: 1rem;
      border: 1px dashed rgba(0, 55, 255, 0.49);

      .table-header {
        .item-line {
          margin-left: 2rem;
          padding-bottom: 1rem;

          .title {
            color: #00c0ef;
            font-size: 1.2rem;
          }

          .titleTwo {
            color: #8cbda4;
            padding-left: 2rem;
            font-size: 0.8rem;
            font-family: Apple;
          }
        }
      }

      .il-childTitle {
        margin-top: 1.5rem;
        color: #7AB2CB;
        margin-left: 2rem;
        font-size: 1rem;
        font-family: 黑体;
      }

      .il-childs {
        color: #4AB7BD;
        text-align: right;
      }
    }

    .con-main {
      margin: 0 1%;
      width: 48%;
      height: 100%;

      .main-table {
        border: 1px solid rgba(0, 255, 255, 0.11);
        margin-bottom: 1%;
        height: 40%;
        padding: 4px;
        overflow: hidden;

        .table-header {
          padding: 4px 0;
          height: 50%;

          .item-line {
            height: 50%;
            font-weight: bolder;
            font-size: 20px;

            .title {
              color: #00FFFF;
            }

            .content {
            }
          }
        }

        .table-content {
          padding: 4px 0;
          height: 50%;
          font-size: 16px;
          font-weight: bolder;

          .item-line {
            height: 50%;
            display: flex;

            .il-child {
              width: 33%;
              display: flex;

              div {
                width: 49%;
                margin-right: 1%;
              }
            }
          }
        }

        .bg-blue {
          color: #20a0ff;
        }

        .bg-yellow {
          color: #FFBA00;
        }
      }

      .e-chart-border {
        border: 1px solid rgba(0, 255, 255, 0.13);
        margin-bottom: 1%;
      }
    }

    .con-right {
      width: 25%;
      height: 100%;

      .e-chart-border {
        border: 1px solid rgba(0, 255, 255, 0.13);
        margin-bottom: 1%;
      }
    }

    .echarts {
      margin-left: 4rem;

      .echarts1 {
      }

      .echarts2 {
      }

      .echarts3 {

      }

      .echarts4 {
      }
    }

  }
}

/* 大分辨率设备 (工作站或者台式机, 961px and up) */
@media only screen and (min-width: 961px) {
  .report-container {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    font-size: 12px;

    .report-main {
      margin-left: 3rem;

      .con-left {
        .main-table {
          height: calc(100% - 32px);
          border: 1px solid rgba(0, 255, 255, 0);
          overflow: hidden;

          .table-header {
            overflow: hidden;

            .table-item {
              border: 1px solid rgba(251, 252, 252, 0);
              display: flex;
              font-weight: bolder;
              min-height: 32px;

              .item-col {
                color: #ffffff;
                border: 1px solid rgba(0, 255, 255, 0);
                word-wrap: break-word;
                padding: 2px 2px;
              }

              .col-1 {
                width: 12rem;
              }

              .col-2 {
                width: 27rem;
              }

              .col-3 {
                width: 15rem;
              }

              .col-4 {
                width: 8rem;
              }

              .col-5 {
                width: 8rem;
              }

              .col-6 {
                width: 8rem;
              }
            }
          }

          .table-content {
            height: 30rem;
            overflow: hidden;

            .table-item:nth-of-type(odd) {
              background: rgba(122, 178, 203, 0.22);
            }

            .table-item:nth-of-type(even) {
              background: rgba(153, 203, 122, 0.22);
            }

            .table-item {
              display: flex;
              font-weight: bolder;
              border: 1px #FFFFFF solid;
              margin-top: 0.3rem;
              border-radius: 5px;

              .item-col {
                color: #ffffff;
                border: 1px solid rgba(0, 255, 255, 0.29);
                word-wrap: break-word;
                padding: 2px 2px;
              }

              .col-1 {
                width: 12rem;
              }

              .col-2 {
                width: 27rem;
              }

              .col-3 {
                width: 15rem;
              }

              .col-4 {
                width: 8rem;
              }

              .col-5 {
                width: 8rem;
              }

              .col-6 {
                width: 8rem;
              }
            }
          }
        }
      }
    }

    .main-table {
      margin-top: 1rem;
      border: 1px dashed rgba(0, 255, 255, 0.11);

      .table-header {
        .item-line {
          margin-top: 3.5rem;
          margin-left: 2rem;

          .title {
            font-size: 2rem;
            color: #00c0ef;
          }

          .titleTwo {
            font-size: 1.5rem;
            color: #8cbda4;
            padding-left: 2rem;
          }
        }
      }

      .il-childTitle {
        font-size: 1.2rem;
        color: #7AB2CB;
        margin-bottom: 1.5rem;
        margin-left: 2rem;
        margin-top: 4rem;
      }

      .il-childs {
        font-size: 1.3rem;
        color: #4AB7BD;
        text-align: right;
      }
    }

    .con-main {
      margin: 0 1%;
      width: 48%;
      height: 100%;

      .main-table {
        border: 1px solid rgba(0, 255, 255, 0.11);
        margin-bottom: 1%;
        height: 40%;
        padding: 4px;
        overflow: hidden;

        .table-header {
          padding: 4px 0;
          height: 50%;

          .item-line {
            height: 50%;
            font-weight: bolder;
            font-size: 20px;

            .title {
              color: #00FFFF;
            }

            .content {
            }
          }
        }

        .table-content {
          padding: 4px 0;
          height: 50%;
          font-size: 16px;
          font-weight: bolder;

          .item-line {
            height: 50%;
            display: flex;

            .il-child {
              width: 33%;
              display: flex;

              div {
                width: 49%;
                margin-right: 1%;
              }
            }
          }
        }

        .bg-blue {
          color: #20a0ff;
        }

        .bg-yellow {
          color: #FFBA00;
        }
      }

      .e-chart-border {
        border: 1px solid rgba(0, 255, 255, 0.13);
        margin-bottom: 1%;
      }
    }

    .con-right {
      width: 25%;
      height: 100%;

      .e-chart-border {
        border: 1px solid rgba(0, 255, 255, 0.13);
        margin-bottom: 1%;
      }


      .right-table {
        height: calc(58% - 30px);
        border: 1px solid rgba(32, 160, 255, 0.36);
        margin-bottom: 2%;
        overflow: hidden;
        padding: 2px 4px;

        .table-item {
          height: 28px;
          line-height: 28px;
          margin-bottom: 4px;

          .item-day {
            margin-left: 10px;
            display: inline-block;
          }

          //.item-device {
          //  width: 114px;
          //  display: inline-block;
          //}
          //.item-type {
          //  width: 76px;
          //  display: inline-block;
          //}
        }

        .yi-chang {
          color: #FF7070;
          border-left: 4px solid #FF7070;
        }

        .jin-gao {
          color: #FF7070;
          border-left: 4px solid #FF7070;
        }

        .dai-ding {
          color: #FF7070;
          border-left: 4px solid #FF7070;
        }
      }
    }

    .echarts {
      margin-left: 8rem;
      margin-top: 2rem;

      .echarts1 {
      }

      .echarts2 {
        margin-left: 3rem;
      }

      .echarts3 {

      }

      .echarts4 {
        margin-left: 13rem;
      }
    }
  }

}
</style>
